<template>
<div class="logistics">
  <c-header :title="'物流详情'"></c-header>
  <div class="logistics-hd">
    <van-steps :active="active" icon="tosend" title="运单号 335652522525" description="联系电话 95543">
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
  </div>
  <div class="logistics-bd">
    <h4>物流跟踪</h4>
    <van-steps direction="vertical" :active="0" active-color="#f44">
      <van-step>
        <h3>【深圳市】广东深圳宝安区西乡街智谷中心  快递员：罗永平[110110110] 已经送出，请保持电话通畅!</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【深圳市】广东深圳宝安区西乡街智谷中心-已揽件</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【深圳市】广东深圳宝安区西乡街分部-已揽件</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【深圳市】广东深圳罗湖中转部-已发件</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【深圳市】广东深圳罗湖中转部-已进行装袋扫描</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【深圳市】广东深圳罗湖龙华分布分部-业务员 已收件</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>您的订单已进入第三方卖家库房，准备出库</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>您提交了订单，请等待第三方卖家系统确认</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
    </van-steps>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      active: 2
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/styles/common.scss';
.logistics {
    background-color: #fff;
    h4 {
        margin: px2rem(15px) px2rem(10px);
        color: #000;
    }
    &-hd {}
    &-bd {

        border-top: px2rem(10px) solid #f2f2f2;
    }
}
.van-step--horizontal.van-step--finish .van-step__circle,
.van-step--horizontal.van-step--finish .van-step__line {
    background-color: #f44;
}
</style>
